<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>es6 类的访问器方法</title>
    <!-- 
  在 JavaScript ES6 中，类的访问器方法（getter 和 setter）允许我们定义对象属性的访问和赋值行为，从而提供更灵活的控制。
  1. 基本概念
  - 访问器方法：使用  `get`  和  `set`  关键字定义的方法，分别用于读取和设置类的属性值。
  - getter：用于获取属性值的方法。
  - setter：用于设置属性值的方法。

  2. 定义访问器方法
  在类中，可以通过  `get`  和  `set`  关键字来定义访问器方法。

   2.1 定义 Getter 和 Setter
  以下是一个示例，展示如何在类中定义访问器方法：
  class Person {
      constructor(firstName, lastName) {
          this.firstName = firstName;
          this.lastName = lastName;
      }

      // Getter
      get fullName() {
          return `${this.firstName} ${this.lastName}`;
      }

      // Setter
      set fullName(name) {
          [this.firstName, this.lastName] = name.split(' ');
      }
  }

  // 使用示例
  const alice = new Person('Alice', 'Johnson');

  // 使用 getter
  console.log(alice.fullName); // 输出: Alice Johnson

  // 使用 setter
  alice.fullName = 'Alice Brown';
  console.log(alice.firstName); // 输出: Alice
  console.log(alice.lastName);  // 输出: Brown
  3. 访问器方法的特点
  - 动态计算：getter 方法可以根据其他属性的值动态计算并返回结果。
  - 数据验证：setter 方法可以对传入的值进行验证和处理，例如检查格式或范围。
  - 封装性：通过访问器方法，可以控制属性的读取和写入，增强了数据的封装性。

  4. 优缺点
  - 优点：
    - 封装性：可以控制属性的访问和修改，保护内部状态。
    - 灵活性：可以在获取或设置属性时执行额外的逻辑。
    
  - 缺点：
    - 性能开销：访问器方法在访问属性时会引入额外的函数调用，可能影响性能。
    - 可读性：如果使用不当，可能会导致代码的可读性降低。

  5. 总结
  ES6 中类的访问器方法（getter 和 setter）提供了一种灵活的方式来控制类的属性访问和赋值行为。通过这些方法，开发者可以增强数据的封装性和安全性，实现更复杂的逻辑。理解访问器方法的使用对于编写高效和可维护的 JavaScript 代码非常重要。
   -->
  </head>
  <body>
    <script>
      // 1.访问器的编写方式
      // class Person {
      //   constructor(firstName, lastName) {
      //     this._firstName = firstName;
      //     this.lastName = lastName;
      //   }

      //   // Getter
      //   get fullName() {
      //     return `${this._firstName}`;
      //   }

      //   // Setter
      //   set fullName(name) {
      //     this._firstName = name;
      //   }
      // }

      // const alice = new Person('Alice', 'Johnson');
      // console.log(alice.fullName); // 输出: Alice Johnson

      // // 使用 setter
      // alice.fullName = 'Alice Brown';
      // console.log(alice._firstName); // 输出: Alice Brown
      // console.log(alice.lastName);  // 输出: Johnson

      // 2.访问器方法的使用场景
      class Circle {
        constructor(radius) {
          this._radius = radius;
        }

        // Getter
        get radius() {
          return this._radius;
        }

        // Setter
        set radius(value) {
          if (value <= 0) {
            throw new Error('Radius must be positive');
          }
          this._radius = value;
        }

        // 计算面积
        get area() {
          return Math.PI * this._radius ** 2;
        }
      }

      const circle = new Circle(5);
      console.log(circle.area); // 输出: 78.53981633974483
      console.log(circle.radius); // 输出: 5

      // 使用 setter
      circle.radius = 10; 

    </script>
  </body>
</html>
